<template>
    <div id="roleList">
        <el-card class="mg-b-10">
            <div class="layout-top">
                <el-row :gutter="20">
                    <el-col :span="6">
                        <div class="grid-content">
                            <el-input size="mini" type="text" v-model="searchName" placeholder="请输入查询条件" suffix-icon="el-icon-search"></el-input>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div class="grid-content">
                            <el-select class="select-prefix" size="mini" v-model="status" placeholder="请选择用户状态" filterable>
                                <template slot = "prefix">
                                    <span class = 'prefixSlot'>用户状态</span>
                                </template>
                                <el-option
                                    v-for="item in $Options.commonStatus"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </div>
                    </el-col>
                    <el-col :span="12">
                        <div class="grid-content layout-right">
                             <el-button type="primary" size="mini" @click="isCreateUser= true">添加用户</el-button>
                        </div>
                    </el-col>
                </el-row>
            </div>
        </el-card>
        <el-card>
            <el-table :data="tableData" border stripe>
                <el-table-column label="id" prop="userId" width="60"></el-table-column>
                <el-table-column label="昵称" prop="personName"></el-table-column>
                <el-table-column label="头像">
                    <template slot-scope="scope">
                        <el-image style="width: 30px; height: 30px;"
                         :src="scope.row.headImage ? scope.row.headImage : 'https://goods.dingdian.xin/FsmpgGd0uQDg7jqpM88K33qyPDU6?imageMogr2/thumbnail/300000@'" fit="cover">
                         <div slot="error" class="image-slot">
                            <i class="el-icon-picture-outline" style="font-size: 30px;"></i>
                        </div>
                        </el-image>
                    </template>
                </el-table-column>
                <el-table-column label="账号" prop="loginName" show-overflow-tooltip> 
                </el-table-column>
                <el-table-column label="性别" prop="personName">
                    <template slot-scope="scope">
                        {{scope.row.gender == 1 ? '男' : '女'}}
                    </template>
                </el-table-column>
                <el-table-column label="状态">
                    <template slot-scope="scope">
                        <el-tag size="small" :type="scope.row.isLocked === 0 ? 'success' : scope.row.isLocked === 1 ? 'danger' : ''">
                            {{scope.row.isLocked === 0 ? '启用' : scope.row.isLocked === 1 ? '停用' : ''}}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="删除/恢复">
                    <template slot-scope="scope">
                        <el-tag size="small" :type="scope.row.isDeleted === 0 ? '' : scope.row.isDeleted === 1 ? 'danger' : ''">
                            {{scope.row.isDeleted === 0 ? '已恢复' : scope.row.isDeleted === 1 ? '已删除' : ''}}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="备注" prop="remark"></el-table-column>
                <el-table-column  label="操作" width="100">
                    <template slot-scope="scope">
                        <el-dropdown size="small" type="text" trigger="click" placement="bottom-start">
                            <span class="el-dropdown-link" style="font-size: 12px; cursor: pointer">
                                操作<i class="el-icon-arrow-down el-icon--right"></i>
                            </span>
                            <el-dropdown-menu slot="dropdown" >
                                <el-dropdown-item command="a" @click.native="handleDisabledUser(scope.row)" >
                                    {{scope.row.isLocked === 0 ? '停用' : scope.row.isLocked === 1 ? '启用' : ''}}
                                </el-dropdown-item>
                                <el-dropdown-item command="a" @click.native="handleDeleteUser(scope.row)" >
                                    {{scope.row.isDeleted === 0 ? '删除' : scope.row.isDeleted === 1 ? '恢复' : ''}}
                                </el-dropdown-item>
                                <el-dropdown-item command="b" @click.native="handleEditUser(scope.row)" >编辑</el-dropdown-item>
                                <el-dropdown-item command="c" @click.native="handleUserBindRole(scope.row)" >添加角色</el-dropdown-item>
                                <el-dropdown-item command="d" @click.native="handleCheckUserBindRole(scope.row)" >查看角色</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </template>
                </el-table-column>
            </el-table>
            <page :total="total" :page="page" :size="size" @handlepagechange="handlePageChange" @handleSizeChange="handleSizeChange"></page>
            <createUser v-if="isCreateUser" :isCreateUser="isCreateUser" @cancelShow="cancelShow" :type="handleType" :id="userId" @getUserList="getUserList"></createUser>
            <editUserRole v-if="isShowRole" :type="type" :isShowRole="isShowRole" @cancelShow="cancelShow" :userInfo="userInfos" @getUserList="getUserList"></editUserRole>
            <userGroupRole v-if="isShowUserGroupRoles" :isShowUserGroupRoles="isShowUserGroupRoles" @cancelShow="cancelShow" :userInfo="userInfos"></userGroupRole>
        </el-card>

    </div>
</template>
<script>
    import page from '../../commonComponents/page'
    import createUser from './createUserTpl'
    import editUserRole from './editRoleForUser'
    import userGroupRole from './userGroupRole'
    export default {
        components: {page, createUser, editUserRole, userGroupRole},
        data() {
            return {
                page: 1,
                size: 10,
                total: 0,
                status: '',
                searchName: '',
                isCreateUser: false,
                tableData: [],
                handleType: 'create',
                userId: '',
                isShowRole: false,
                userInfos: {},
                isShowUserGroupRoles: false,
                title: '',
                type: 'add'
            }
        },
        mounted() {
            this.getUserList()
        },
        methods: {
            getUserList() {
                let params= {
                    page: this.page,
                    size: this.size
                }
                this.$server.systemControlApi.getUserListByPage(params).then(res => {
                    this.tableData= res.data
                    this.total= res.total
                })
            },
            handlePageChange(page) {
                this.page= page
                this.getUserList()
            },
            handleSizeChange(size) {
                this.size= size
                this.getUserList()
            },
            /**用户查看编辑 */
            handleEditUser(scope) {
                this.userId= scope.userId
                this.handleType= 'edit'
                this.isCreateUser= true
                //
            },
            /** 禁用用户 */
            handleDisabledUser(scope) {
                try{
                    let params= {
                        userId: scope.userId
                    }
                    if(scope.isLocked === 0) {
                        params.isLocked= 1
                        this.title= '确定停用该用户？'
                    }else{
                        params.isLocked= 0
                        this.title= '确定启用该用户？'
                    }
                    this.$confirm(this.title, {type: 'warning'}).then(_ => {
                        this.$server.systemControlApi.changeUserStatus(params).then(res => {
                            this.getUserList()
                        })
                    }).catch()
                }catch(err) {this.$paramsError(err)}
            },
            /**删除/恢复用户 */
            handleDeleteUser(scope) {
                try{
                    let params= {
                        userId: scope.userId
                    }
                    if(scope.isDeleted === 0) {
                        params.isDeleted= 1
                        this.title= '确定删除该用户？'
                    }else if(scope.isDeleted === 1){
                        params.isDeleted= 0
                        this.title= '确定恢复该用户？'
                    }
                    this.$confirm(this.title, {type: 'warning'}).then(_ => {
                        this.$server.systemControlApi.deleteOrRecoveryUser(params).then(res => {
                            this.getUserList()
                        })
                    }).catch()
                    

                }catch(err){this.$paramsError(err)}
            },
            /**用户关联角色 */
            handleUserBindRole(scope) {
                this.userInfos= {
                    userId: scope.userId,
                    personName: scope.personName
                }
                this.type= 'add'
                this.isShowRole= true
            },
            handleCheckUserBindRole(scope) {
                this.userInfos= {
                    userId: scope.userId,
                    personName: scope.personName
                }
                this.type= 'edit'
                this.isShowRole= true
            },
            cancelShow(title) {
                this.isCreateUser= title
                this.isShowRole= title
                this.isShowUserGroupRoles= title
            }
        }
    }
</script>